<template>
  <div class="manage-account">
    <div class="titles" v-if="fatherId == ''">主账号：{{ username }}</div>
    <div class="titles" v-else>子账号：{{ epName }}</div>
    <div class="lines"></div>
    <Search v-on:Search="DoSearch" @isShow="isShowFn"></Search>
    <div class="btn">
      <el-button
        type="primary"
        size="small"
        :disabled="selectedRows.length > 0"
        @click="openDialog('add')"
        v-show="isMain == 1"
        >新增</el-button
      >
      <el-button
        type="primary"
        size="small"
        :disabled="selectedRows.length > 1 || selectedRows.length == 0"
        @click="openDialog('updated')"
        v-show="isMain == 1"
        >修改</el-button
      >
      <el-button
        type="primary"
        size="small"
        :disabled="selectedRows.length > 1 || selectedRows.length == 0"
        @click="resetDialogVisible = true"
        v-show="isMain == 1"
        >重置密码</el-button
      >
      <!-- <el-button
        type="primary"
        size="small"
        :disabled="selectedRows.length > 1 || selectedRows.length == 0"
        @click="handleDep"
        v-show="isMain == 1"
        >部门管理</el-button
      >
      <el-button
        type="primary"
        size="small"
        :disabled="selectedRows.length > 1 || selectedRows.length == 0"
        @click="handlePower"
        v-show="isMain == 1"
        >权限管理</el-button
      > -->
      <el-button
        type="primary"
        size="small"
        @click="handleChildPersonnel"
        v-if="isMain == 1 || position == 1"
        >人员管理</el-button
      >
      <el-button
        type="primary"
        size="small"
        :disabled="selectedRows.length == 0"
        @click="startUse"
        v-show="isMain == 1"
        >启用</el-button
      >
      <el-button
        size="small"
        :disabled="selectedRows.length == 0"
        @click="stopUse"
        v-show="isMain == 1"
        >停用</el-button
      >
      <!-- <el-button
        type="primary"
        size="small"
        :disabled="selectedRows.length == 0"
        @click="starDialogVisible = true"
        v-show="isMain == 1"
        >启用</el-button
      >
      <el-button
        type="danger"
        size="small"
        :disabled="selectedRows.length == 0"
        @click="stopDialogVisible = true"
        v-show="isMain == 1"
        >停用</el-button
      > -->
    </div>
    <!-- 列表 -->
    <div class="table_" :class="[isShow_ ? 'table_1' : 'table_2']">
      <el-table
        :data="tableData"
        style="width: 100%"
        ref="table"
        border
        highlight-current-row
        @selection-change="handleSelectChange"
      >
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column prop="userName" label="账号"> </el-table-column>
        <el-table-column prop="realName" label="员工姓名"> </el-table-column>
        <el-table-column prop="roleNames" label="角色"> </el-table-column>
        <el-table-column prop="position" label="职位">
          <template slot-scope="scope">{{
            scope.row.position == 1 ? "经理" : "员工"
          }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"> </el-table-column>
        <el-table-column prop="status" label="帐号状态">
          <template slot-scope="scope">
            <div
              class="status"
              :style="
                scope.row.status == 200
                  ? { background: 'green' }
                  : { background: 'red' }
              "
            ></div>
            {{ scope.row.status == 200 ? "正常" : "停用" }}
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建日期">
          <template slot-scope="scope">{{
            moment(scope.row.createDate).format("YYYY-MM-DD HH:mm:ss")
          }}</template>
        </el-table-column>

        <template slot="empty">
          <img
            src="../../../assets/images/noneData.svg"
            alt=""
            class="nullDataImg"
          />
        </template>
      </el-table>
      <Pagination
        :total.sync="total"
        :page.sync="pageNo"
        :limit.sync="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout=" total,sizes,prev, pager, next, jumper"
        @pagination="handleList"
      ></Pagination>
    </div>
    <!-- 新增账号 -->
    <el-dialog
      title="新增账号"
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      class="dialog_"
      @close="handleClose"
      :destroy-on-close="true"
    >
      <el-form :model="addForm" ref="addForm" :rules="rules" class="elForm">
        <el-form-item prop="accountName" label="账户名：">
          <el-input
            v-model="addForm.accountName"
            autocomplete="off"
            size="small"
            placeholder="请输入账户名"
            @blur="userNameBlur"
          ></el-input>
        </el-form-item>
        <el-form-item prop="userName" label="员工姓名：">
          <el-input
            v-model="addForm.userName"
            autocomplete="off"
            size="small"
            placeholder="请输入员工姓名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" label="手机号码：">
          <el-input
            v-model="addForm.phone"
            autocomplete="off"
            size="small"
            placeholder="请输入手机号"
            class="input-num"
            onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
            @blur="phoneBlur('add')"
            maxlength="11"
          ></el-input>
        </el-form-item>
        <el-form-item prop="email" label="电子邮箱：">
          <el-input
            v-model.trim="addForm.email"
            autocomplete="off"
            size="small"
            placeholder="请输入电子邮箱"
            @blur="emailBlur('add')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="position" label="职位：">
          <el-select
            v-model="addForm.position"
            size="small"
            placeholder="请选择职位"
          >
            <el-option label="经理" value="1"></el-option>
            <el-option label="员工" value="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="角色配置：" prop="roleName" class="jsForm">
          <el-select
            v-model="addForm.roleName"
            multiple
            allow-create
            placeholder="请选择角色配置"
            size="small"
            @change="handleChange(addForm.roleName)"
          >
            <el-option
              v-for="item in options"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
          <i @click="addrole" class="el-icon-plus addbtn_"></i>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :disabled="isBtnDisabled"
          @click="handleAdd('addForm')"
          >确 定</el-button
        >
        <el-button @click="addUserClose(1)" class="resletBtn">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新增-角色创建 -->
    <el-dialog
      title="角色创建"
      :visible.sync="dialogVisible"
      class="dialog_"
      @close="handleClose"
    >
      <el-form
        :rules="addRules"
        :model="addRuleForm"
        ref="addRuleForm"
        class="elForm"
      >
        <el-form-item prop="roleName" label="角色：">
          <el-input
            v-model="addRuleForm.roleName"
            size="small"
            maxlength="50"
            placeholder="请输入角色"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单权限：" class="qxForm">
          <el-checkbox
            v-model="addmenuNodeAll"
            size="small"
            @change="handleRoleCheckedTreeNodeAll"
            >全选/全不选</el-checkbox
          >
        </el-form-item>
        <div class="tree-box">
          <el-form-item class="tree">
            <el-tree
              :data="menuOptions"
              :props="defaultProps"
              ref="menuRole"
              node-key="id"
              show-checkbox
              :default-checked-keys="addRuleForm.ids"
            >
            </el-tree>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleAddRoles('addRuleForm')"
          >确 定</el-button
        >
        <el-button @click="handleClose" class="resletBtn">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改账号 -->
    <el-dialog
      title="修改账号"
      v-if="updatedialogVisible"
      :close-on-click-modal="false"
      :visible.sync="updatedialogVisible"
      class="xgdialog_"
      @close="handleUpdateClose"
      :destroy-on-close="true"
    >
      <el-form
        :model="updateForm"
        ref="updateForm"
        :rules="rules"
        class="elForm"
      >
        <el-form-item label="账户名：" prop="username" class="xgForm">
          {{ updateForm.userName }}
        </el-form-item>
        <el-form-item label="员工姓名：" prop="realName" class="xgForm">
          {{ updateForm.realName }}
        </el-form-item>

        <div class="lines_"></div>

        <el-form-item label="手机号码：" prop="phone" class="top20">
          <el-input
            v-model="updateForm.phone"
            size="small"
            class="input-num"
            onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
            maxlength="11"
            @blur="phoneBlur('update')"
          ></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱：" prop="email">
          <el-input
            v-model="updateForm.email"
            @input="$forceUpdate()"
            size="small"
            @blur="emailBlur('update')"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位：" prop="position">
          <el-select
            v-model="updateForm.position"
            @input="$forceUpdate()"
            size="small"
            placeholder="请选择职位"
          >
            <el-option label="经理" :value="1" :key="1"></el-option>
            <el-option label="员工" :value="2" :key="2"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="角色配置：" prop="roleName" class="jsForm">
          <el-select
            v-model="updateForm.roleName"
            multiple
            allow-create
            placeholder="请选择角色配置"
            size="mini"
            class="setInputClass"
            @change="handleChange(updateForm.roleName)"
          >
            <el-option
              v-for="item in options"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>
          <i @click="addrole" class="el-icon-plus addbtn_"></i>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :disabled="isBtnDisabled"
          @click="getUpdate('updateForm')"
          >确 定</el-button
        >
        <el-button @click="handleUpdateClose" class="resletBtn"
          >取 消</el-button
        >
      </div>
    </el-dialog>

    <!-- 人员管理 -->
    <PeoplesDialog
      ref="PeoplesDialog"
      :treeData="treeData"
      :roleOptions="roleOptions"
      @depChange="depChange"
      @close="peopleClose"
      @addDep="addDep"
      @delDep="delDep"
      :peopleDialogVisible="peopleDialogVisible"
    ></PeoplesDialog>
    <!-- 人员管理- 点击+所属部门 -->
    <AddDepDialog
      ref="AddDepDialog"
      :addDepDialogVisible="addDepDialogVisible"
      @close="addDepclose"
    ></AddDepDialog>
    <!-- 人员管理- 点击-删除部门 -->
    <DelDeptDialog
      v-if="delDepDialogVisible"
      :deptData="deptData"
      :delDepDialogVisible="delDepDialogVisible"
      @close="delDepClose"
      @save="saveDept"
      @deleteRow="deleteRow"
    ></DelDeptDialog>

    <!-- 重置密码 -->
    <el-dialog
      title="title"
      :visible.sync="resetDialogVisible"
      :show-close="false"
      center
      class="reset-dialog-header"
      @close="handleClose"
    >
      <div slot="title" class="reset-dialog-icon">
        <i class="el-icon-unlock"></i>
      </div>
      <h1>您确认对该账号重置密码吗？</h1>
      <div class="words">重置后请及时通知员工修改密码</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleResetPwd">确 定</el-button>
        <el-button @click="handleClose" class="resletBtn">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 停用 -->
    <el-dialog
      title="title"
      :visible.sync="stopDialogVisible"
      :show-close="false"
      center
      class="reset-dialog-header"
    >
      <div slot="title" class="reset-dialog-icon">
        <i class="el-icon-remove-outline"></i>
      </div>
      <h1>请确认对该账号进行停用处理</h1>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleStarOrStop">确 定</el-button>
        <el-button @click="stopDialogVisible = false" class="resletBtn"
          >取 消</el-button
        >
      </span>
    </el-dialog>
    <!-- 启用 -->
    <el-dialog
      title="title"
      :visible.sync="starDialogVisible"
      :show-close="false"
      center
      class="reset-dialog-header"
    >
      <div slot="title" class="dialog-icon">
        <i class="el-icon-circle-check"></i>
      </div>
      <h1>请确认对该账号进行启用处理</h1>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleStarOrStop">确 定</el-button>
        <el-button @click="starDialogVisible = false" class="resletBtn"
          >取 消</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="人员管理"
      :visible.sync="dialogTableVisible"
      class="dialog_"
      @close="handleClose"
    >
      <el-table
        :data="tableData"
        class="uesr-table"
        ref="userTable"
        @selection-change="handleUserSelectChange"
        :row-key="(row) => row.id"
      >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55"
        ></el-table-column>
        <el-table-column
          prop="realName"
          label="员工姓名"
          width="200"
        ></el-table-column>
        <el-table-column prop="position" label="职位">
          <template slot-scope="scope">{{
            scope.row.position == 1 ? "经理" : "员工"
          }}</template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handlePerson">确 定</el-button>
        <el-button @click="handleClose" class="resletBtn">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 权限管理 -->
    <el-dialog
      title="权限管理"
      :visible.sync="powerDialogVisible"
      class="power-dialog"
      @close="handleClose"
      :destroy-on-close="true"
    >
      <el-divider></el-divider>
      <el-form
        :rules="rules"
        :model="ruleForm"
        ref="ruleForm"
        label-width="120px"
      >
        <el-form-item label="角色：" prop="roleName">
          <el-select
            v-model="ruleForm.roleName"
            multiple
            allow-create
            placeholder="请选择角色"
            size="small"
            @change="handleChange(ruleForm.roleName)"
          >
            <el-option
              v-for="item in options"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            >
            </el-option>
          </el-select>

          <el-button
            class="addbtn"
            @click="addrole"
            type="primary"
            size="small"
            icon="el-icon-plus"
            circle
          ></el-button>
          <!-- <treeselect v-model="ruleForm.roleName" :multiple="true" :options="options" @input="handleRoleList" :clearOnSelect="true">
          </treeselect> -->
        </el-form-item>
        <el-form-item label="菜单权限：">
          <el-checkbox
            v-model="menuNodeAll"
            @change="handleCheckedTreeNodeAll"
            :indeterminate="isIndeterminate"
          >
            全选/全不选
          </el-checkbox>
        </el-form-item>
        <el-form-item class="tree" v-if="powerDialogVisible">
          <el-tree
            :data="menuOptions"
            :props="defaultProps"
            ref="menu"
            node-key="id"
            show-checkbox
            :default-checked-keys="ruleForm.ids"
            @check="handleCheckClick"
          >
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getUserRole('ruleForm')"
          >确 定</el-button
        >
        <el-button @click="handleClose" class="resletBtn">取 消</el-button>
      </div>
    </el-dialog>

    <!-- <DepartmentDialog
      :depDialogVisible="depDialogVisible"
      :treeData="treeData"
      @close="depClose"
      @delete="deleteDep"
    ></DepartmentDialog> -->
  </div>
</template>

<script>
import {
  getMenu,
  getMenuTree,
  addAccount,
  accountList,
  updateAccount,
  getAllroles,
  userAndRole,
  userStatus,
  resetPwd,
  personnelNew,
  childPersonnel,
  childRoleList,
  getUserMenu,
  findUserName,
  findEmail,
  findPhone,
  saveOrUpdateMenuTreeAndRole,
  queryAllDepartment,
  addDepartment,
  delAllDepartment,
  findDepartmentUser,
  addUserManagement,
  dellDepartment,
} from "@/api/user.js";
import { menuList, addRoles } from "@/api/role.js";
import { mapGetters } from "vuex";
import Pagination from "@/components/Pagination";
import Search from "@/views/system/manageAccount/listSearch.vue";
import moment from "moment";
import Treeselect from "@riophae/vue-treeselect";
import _ from "lodash";
import DepartmentDialog from "./components/DepartmentDialog.vue";
import PeoplesDialog from "./components/PeoplesDialog.vue";
import AddDepDialog from "./components/AddDepDialog.vue";
import DelDeptDialog from "./components/DelDeptDialog.vue";
import {
  validatephonenumber,
  checkEmail,
  validateUsername,
  validateRealname,
} from "@/utils/validate.js";
import { updateRole } from "@/api/role.js";

import { Message } from "element-ui";

export default {
  name: "manageAccount",
  components: {
    Pagination,
    Search,
    Treeselect,
    DepartmentDialog,
    PeoplesDialog,
    AddDepDialog,
    DelDeptDialog,
  },
  data() {
    return {
      handleType: 1,
      isBtnDisabled: false,
      treeData: [],
      roleOptions: [],
      deptData: [],
      delDepDialogVisible: false,
      addDepDialogVisible: false,
      depDialogVisible: false,
      peopleDialogVisible: false,
      total: 0,
      pageNo: 1,
      pageSize: 20,
      moment: moment,
      // position: "",
      status: 200,
      inputForm: {
        userName: "",
        realName: "",
        roleId: "",
        phone: "",
        status: "",
        id: "",
      },
      value1: "",
      model: "",
      tableData: [],
      gridData: [],
      dialogFormVisible: false,
      addForm: {
        accountName: "",
        userName: "",
        phone: undefined,
        email: "",
        position: "",
        roleName: [],
      },
      updateForm: {
        realName: "",
        userName: "",
        phone: "",
        email: "",
        position: "",
      },
      resetDialogVisible: false,
      updatedialogVisible: false,
      starDialogVisible: false,
      stopDialogVisible: false,
      powerDialogVisible: false,
      dialogTableVisible: false,
      dialogVisible: false,
      isAddRole: false,
      menuNodeAll: false,
      addmenuNodeAll: false,
      isIndeterminate: false,
      ruleForm: {
        roleName: [],
        ids: [],
      },
      //新增角色表单
      addRuleForm: {
        roleName: "",
        ids: [
          {
            name: "",
            type: "",
            selected: "",
            childMenuList: "",
          },
        ],
      },
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "change" },
        ],
        accountName: [
          { required: true, message: "请设置账号信息", trigger: "blur" },
          { validator: validateUsername, trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validatephonenumber, trigger: "blur" },
        ],
        position: [
          { required: true, message: "请选择职位", trigger: "change" },
        ],
        email: [
          { required: true, message: "请设置电子邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" },
        ],
        userName: [
          { required: true, message: "请设置员工姓名", trigger: "blur" },
          { required: true, validator: validateRealname, trigger: "blur" },
        ],
      },
      //新增角色校验规则
      addRules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
          {
            validator: (rule, value, callback) => {
              if (value.trim() == "") {
                callback(new Error("请输入角色名称"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      menuOptions: [],
      defaultProps: {
        children: "childMenuList",
        label: "name",
        disabled: this.isDisabled,
      },
      selectedRows: [],
      selectedUserRows: [],
      options: [],
      childId: "",
      childStatus: "",
      status: "",
      managedUserIds: [],
      managedUser: [],
      manager: "",
      setEmailObj: {},
      setPhoneObj: {},
      isAdd: false,
      isShow_: true,
    };
  },
  computed: {
    ...mapGetters([
      "epName",
      "username",
      "isMain",
      "position",
      "id",
      "fatherId",
    ]),
  },
  created() {},
  mounted() {
    this.handleList();
  },
  watch: {
    // value:{
    //   handler(newVal) {
    //     if (newVal) {
    //       this.$set(this.ruleForm, "", newVal);
    //     }
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  methods: {
    isShowFn(val) {
      this.isShow_ = val;
    },
    startUse() {
      if (this.selectedRows.every((item) => item.status == 500)) {
        this.starDialogVisible = true;
      } else {
        this.$message.warning("您选择的账号有无法操作项！");
      }
    },
    // 停用-按钮
    stopUse() {
      if (this.selectedRows.every((item) => item.status == 200)) {
        this.stopDialogVisible = true;
      } else {
        this.$message.warning("您选择的账号有无法操作项！");
      }
    },
    async deleteRow(row) {
      const res = await dellDepartment({ id: row.id });
      if (res && res.success) {
        this.$message.success("删除成功");
        this.deptData = await this.getDeptData();
      }
      // this.deptData.splice(index, 1);
    },
    async depChange(val) {
      const selectPeople = await this.getPeopleData(val);
      let selectId = [];
      if (selectPeople.length > 0) {
        selectId = selectPeople.map((item) => item.userId);
      }
      this.$refs.PeoplesDialog.setSelectPeople(selectId);
    },
    saveDept() {
      this.delDepDialogVisible = false;
    },
    delDepClose() {
      this.delDepDialogVisible = false;
    },
    async addDepclose(type, data) {
      if (type == 2) {
        const params = {
          userId: localStorage.getItem("SET_USERID"),
          departmentName: data.name,
        };
        const res = await addDepartment(params);
        if (res) {
          this.$message.success("保存成功");
        }
      }
      this.$refs.AddDepDialog.clearForm("ruleForm");
      this.addDepDialogVisible = false;
      // this.peopleDialogVisible=true;
      this.handleChildPersonnel();
    },
    addDep() {
      this.addDepDialogVisible = true;
      this.peopleDialogVisible = false;
      this.$refs.PeoplesDialog.setSelectPeople([]);
      this.$refs.PeoplesDialog.clearForm("ruleForm");
    },
    async getDeptData() {
      const data = await queryAllDepartment({
        userId: localStorage.getItem("SET_USERID"),
      });
      return data.result;
    },
    async getPeopleData(departmentId = "") {
      const res = await findDepartmentUser({
        userId: localStorage.getItem("SET_USERID"),
        departmentId,
      });
      return res.result;
    },
    async delDep() {
      this.deptData = await this.getDeptData();
      this.delDepDialogVisible = true;
      this.peopleDialogVisible = false;
      this.$refs.PeoplesDialog.setSelectPeople([]);
      this.$refs.PeoplesDialog.clearForm("ruleForm");
    },
    async peopleClose(type, data) {
      this.peopleDialogVisible = false;
      if (type == 2) {
        const res = await addUserManagement({
          userId: localStorage.getItem("SET_USERID"),
          departmentId: data.department,
          managedUserId: data.peopleName,
        });
        if (res && res.success) {
          this.$message.success("保存成功");
          this.$refs.PeoplesDialog.setSelectPeople([]);
          this.$refs.PeoplesDialog.clearForm("ruleForm");
          this.peopleDialogVisible = false;
        }
      }
    },
    async getOrgList() {
      // const data = await queryAllDepartment({
      //   userId: localStorage.getItem("SET_USERID"),
      // });
      this.treeData = await this.getDeptData();
      this.roleOptions = await this.getPeopleData();
    },
    handleDep() {
      this.depDialogVisible = true;
      this.getOrgList();
    },
    async depClose(type, data) {
      this.depDialogVisible = false;
      if (type == 2) {
        const params = { departmentVo: data };
        await addDepartment(params);

        this.$message.success("保存成功");
      }
    },
    addUserAndRole(roleId) {
      let userRoleList = [roleId];
      let id = "";
      if (this.isAddRole) {
        id = this.selectedRows[0].id;
        userRoleList = [roleId];
      } else {
        for (let i = 0; i < this.selectedRows.length; i++) {
          for (let j = 0; j < this.ruleForm.roleName.length; j++) {
            userRoleList.push(this.ruleForm.roleName[j]);
          }
          id = this.selectedRows[i].id;
        }
      }

      let arr = this.$refs.menuRole.getCheckedKeys() || this.ad.ids || [];
      let ars = JSON.parse(JSON.stringify(this.menuOptions));
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < ars.length; j++) {
          if (ars[j].id == arr[i]) {
            ars[j].selected = 1;
          }

          let ars_ = ars[j].childMenuList;
          if (ars_.length) {
            for (let a = 0; a < ars_.length; a++) {
              if (ars_[a].id == arr[i]) {
                ars_[a].selected = 1;
              }

              let ars__ = ars_[a].childMenuList;
              if (ars__.length) {
                for (let b = 0; b < ars__.length; b++) {
                  if (ars__[b].id == arr[i]) {
                    ars__[b].selected = 1;
                  }
                }
              }
            }
          }
        }
      }

      saveOrUpdateMenuTreeAndRole({
        userId: id,
        menuNodeList: ars,
        roleIdList: userRoleList,
      }).then((res) => {
        this.powerDialogVisible = false;
        this.$set(this.addRuleForm, "roleName", "");
        this.$set(this.addRuleForm, "ids", [
          {
            name: "",
            type: "",
            selected: "",
            childMenuList: "",
          },
        ]);
        this.$message.success("保存成功");
        this.isAddRole = false;
        this.$refs.table.clearSelection();
        // this.$refs.menuRole.setCheckedNodes([]);
        // this.$set(this.addRuleForm, "ids", []);
        this.handleList();
      });
    },
    addrole() {
      this.addmenuNodeAll = false;
      this.isAddRole = true;
      this.handleRoles();
    },
    //获取树形目录
    handleRoles() {
      this.dialogVisible = true;
      // this.powerDialogVisible = false;
      this.$nextTick(() => {
        this.$refs.menuRole.setCheckedNodes([]);
        this.$set(this.ruleForm, "ids", []);
        menuList().then((res) => {
          this.$nextTick(() => {
            this.$refs.menuRole && this.$refs.menuRole.setCheckedNodes([]);
            this.menuOptions = this.formatInitData(res.result.firstMenuList);
            // this.menuList = this.formatInitData(res.result.firstMenuList);
          });
        });
      });
    },
    formatInitData(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].selected == 1) {
          data[i].selected = 0;
        }
        if (data[i].childMenuList.length > 0) {
          this.formatInitData(data[i].childMenuList);
        }
      }
      return data;
    },
    //添加角色
    handleAddRoles(form) {
      const checkNodes =
        this.$refs.menuRole && this.$refs.menuRole.getCheckedNodes();
      const result = this.formatSelectedData(checkNodes, this.menuOptions);
      this.$refs[form].validate((valid) => {
        if (valid) {
          let params = {
            name: this.addRuleForm.roleName.trim(),
            menuVoList: result,
          };
          addRoles(params).then((res) => {
            this.$message.success("保存成功");

            this.addRuleForm = {};
            this.dialogVisible = false;
            this.$refs.addRuleForm.clearValidate();
            this.getRoleList(this.handleType);
            if (this.handleType == 1) {
              this.addForm.roleName.push(res.result);
              // this.$set(this.addForm, "roleName", res.result);
            } else {
              this.updateForm.roleName.push(res.result);
              // this.$set(this.updateForm, "roleName", res.result);
            }
            // this.addUserAndRole(res.result);
            this.$refs.addForm.clearValidate('roleName');
          });
        }
      });
    },
    formatSelectedData(selected = [], all) {
      for (let i = 0; i < selected.length; i++) {
        for (let j = 0; j < all.length; j++) {
          if (selected[i].id === all[j].id) {
            all[j].selected = 1;
          } else {
            this.formatSelectedData(selected, all[j].childMenuList);
          }
        }
      }
      return all;
    },
    async openDialog(type) {
      await this.getRoleList(type);
      if (type == "add") {
        this.isAdd = true;
        this.handleType = 1;
        this.dialogFormVisible = true;

        this.$nextTick(()=>{
          this.$refs.addForm.resetFields();
        })
      }
      if (type == "updated") {
        this.updatedialogVisible = true;
        this.handleType = 2;
        await this.handleSelectRole();
      }
      this.setEmailObj = {};
      this.setPhoneObj = {};
    },
    //校验账户名是否重复
    userNameBlur() {
      if (this.addForm.accountName && this.addForm.accountName.length > 0) {
        findUserName({ userName: this.addForm.accountName }).then((res) => {});
      }
    },
    //校验邮箱是否重复
    emailBlur(type) {
      if (
        type == "add" &&
        this.addForm.email &&
        this.addForm.email.trim() &&
        this.addForm.email.length > 0
      ) {
        findEmail({ email: this.addForm.email.trim() }).then((res) => {
          if (res.code == 3005) {
            this.setEmailObj = res;
            Message({
              message: res.message,
              type: "error",
              duration: 2000,
            });
          } else if (res.code == 200) {
            this.setEmailObj = {};
          }
        });
      } else if (
        type == "update" &&
        this.updateForm.email &&
        this.updateForm.email.trim() &&
        this.updateForm.email.length > 0
      ) {
        if (this.selectedRows[0].email != this.updateForm.email.trim()) {
          findEmail({ email: this.updateForm.email.trim() }).then((res) => {
            if (res.code == 3005) {
              this.setEmailObj = res;
              Message({
                message: res.message,
                type: "error",
                duration: 2000,
              });
            } else if (res.code == 200) {
              this.setEmailObj = {};
            }
          });
        } else {
          this.setEmailObj = {};
        }
      }
    },
    //校验手机号是否重复
    phoneBlur(type) {
      if (
        type == "add" &&
        this.addForm.phone &&
        this.addForm.phone.trim() &&
        this.addForm.phone.trim().length == 11
      ) {
        findPhone({ phone: this.addForm.phone.trim() }).then((res) => {
          if (res.code == 3004) {
            this.setPhoneObj = res;
            Message({
              message: res.message,
              type: "error",
              duration: 2000,
            });
          } else if (res.code == 200) {
            this.setPhoneObj = {};
          }
        });
      } else if (
        type == "update" &&
        this.updateForm.phone &&
        this.updateForm.phone.trim() &&
        this.updateForm.phone.trim().length == 11
      ) {
        if (this.selectedRows[0].phone != this.updateForm.phone.trim()) {
          findPhone({ phone: this.updateForm.phone.trim() }).then((res) => {
            if (res.code == 3004) {
              this.setPhoneObj = res;
              Message({
                message: res.message,
                type: "error",
                duration: 2000,
              });
            } else if (res.code == 200) {
              this.setPhoneObj = {};
            }
          });
        } else {
          this.setPhoneObj = {};
        }
      }
    },
    onInput(value) {
      this.$forceUpdate();
      if (value.toString().length > 11) {
        this.updateForm.phone = thisupdateForm.phone.toString().slice(0, 11);
      }
    },
    limitPhoneNum(value) {
      if (value.toString().length > 11) {
        this.addForm.phone = this.addForm.phone.toString().slice(0, 11);
      }
    },
    //查询
    DoSearch(query) {
      this.inputForm.userName = query.userName;
      this.inputForm.realName = query.realName;
      this.inputForm.roleId = query.roleId;
      this.inputForm.phone = query.phone;
      this.inputForm.status = query.status;
      this.handleList();
    },
    //重置
    handleReset() {
      this.inputForm = {};
    },
    //新增账户
    handleAdd: _.debounce(
      function (form) {
        this.isBtnDisabled = true;
        this.$refs[form].validate((valid) => {
          if (valid) {
            let userName = this.addForm.accountName;
            let realName = this.addForm.userName;
            let phone = this.addForm.phone;
            let email = this.addForm.email;
            let position = this.addForm.position;
            let roleListId = this.addForm.roleName;

            // 判断手机和邮箱是否重复
            if (JSON.stringify(this.setPhoneObj) != "{}") {
              Message({
                message: this.setPhoneObj.message,
                type: "error",
                duration: 2000,
              });
              this.isBtnDisabled = false;
              return false;
            }
            if (JSON.stringify(this.setEmailObj) != "{}") {
              Message({
                message: this.setEmailObj.message,
                type: "error",
                duration: 2000,
              });
              this.isBtnDisabled = false;
              return false;
            }
            addAccount({
              userName,
              realName,
              phone,
              email,
              position,
              roleListId,
            }).then((res) => {
              if (res.success) {
                this.isBtnDisabled = false;
                this.dialogFormVisible = false;
                // this.powerDialogVisible = true;
                this.$message.success("保存成功");
                this.handleList();
                this.addForm = {};
              }
            });
          } else {
            this.isBtnDisabled = false;
          }
        });
      },
      1000,
      false
    ),

    //选中子账号
    handleSelectChange(val) {
      this.selectedRows = val;
      for (let i = 0; i < this.selectedRows.length; i++) {
        this.updateForm.userName = this.selectedRows[i].userName;
        this.updateForm.realName = this.selectedRows[i].realName;
        this.updateForm.phone = this.selectedRows[i].phone;
        this.updateForm.email = this.selectedRows[i].email;
        this.updateForm.position = this.selectedRows[i].position;
        this.childId = this.selectedRows[i].id;
        this.manager = this.selectedRows[i].position;
      }
    },
    //获取人员管理id
    handleUserSelectChange(val) {
      this.selectedUserRows = val;
      this.managedUserIds = this.selectedUserRows.map((item) => {
        return {
          managedUserId: item.id,
        };
      });
    },
    //修改账户
    getUpdate(form) {
      this.isBtnDisabled = true;
      const id = this.childId;
      const phone = this.updateForm.phone;
      const position = this.updateForm.position;
      const email = this.updateForm.email;
      const roleListId = this.updateForm.roleName;

      // 判断手机和邮箱是否重复
      if (JSON.stringify(this.setPhoneObj) != "{}") {
        Message({
          message: this.setPhoneObj.message,
          type: "error",
          duration: 2000,
        });
        this.isBtnDisabled = false;
        return false;
      }
      if (JSON.stringify(this.setEmailObj) != "{}") {
        Message({
          message: this.setEmailObj.message,
          type: "error",
          duration: 2000,
        });
        this.isBtnDisabled = false;
        return false;
      }

      this.$refs[form].validate((valid) => {
        if (valid) {
          updateAccount({ id, phone, position, email, roleListId }).then(
            (res) => {
              this.isBtnDisabled = false;
              this.updatedialogVisible = false;
              // this.$refs.table.clearSelection();
              this.updateForm = {
                realName: "",
                userName: "",
                phone: "",
                email: "",
                position: "",
              };
              this.$refs.updateForm.clearValidate();
              this.$refs.table.clearSelection();
              this.$message.success("修改成功");
              this.handleList();
            }
          );
        } else {
          this.isBtnDisabled = false;
        }
      });
    },

    //重置密码
    handleResetPwd() {
      resetPwd({ id: this.childId }).then((res) => {
        this.resetDialogVisible = false;
        this.$refs.table.clearSelection();
        this.$message.success("重置密码成功");
      });
    },
    //选中的角色
    handleChange(val) {
      this.setFruleFormIds(val);
    },
    // 格式化树形选中结构
    setFruleFormIds(val) {
      let arr = [],
        num = 0;
      if (val.length) {
        val.forEach((item) => {
          updateRole(item).then((res) => {
            if (res.code == 200) {
              let menuList = res.result.menuList;
              menuList.length &&
                menuList.forEach((item_) => {
                  if (item_.selected == 1) {
                    num += 1;
                    if (item_.childMenuList.length == 0) {
                      arr.push(item_.id);
                    }
                  }
                  item_.childMenuList.length &&
                    item_.childMenuList.forEach((item__) => {
                      if (item__.childMenuList.length == 0) {
                        if (item__.selected == 1) {
                          arr.push(item__.id);
                        }
                      } else {
                        item__.childMenuList.length &&
                          item__.childMenuList.forEach((item___) => {
                            if (item___.childMenuList.length == 0) {
                              if (item___.selected == 1) {
                                arr.push(item___.id);
                              }
                            }
                          });
                      }
                    });
                });

              if (num == menuList.length) {
                // 全选
                this.isIndeterminate = false;
                this.menuNodeAll = true;
              } else if (num > menuList.length) {
                // 部分选中
                this.isIndeterminate = true;
                this.menuNodeAll = false;
              }
              this.$set(this.ruleForm, "ids", arr);
            }
          });
        });
      } else {
        this.$set(this.ruleForm, "ids", []);
        // this.$refs.menu.setCheckedNodes([]);
      }
    },
    //账号列表
    handleList() {
      this.inputForm.id = this.id;
      accountList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        id: this.inputForm.id,
        userName: this.inputForm.userName,
        realName: this.inputForm.realName,
        roleId: this.inputForm.roleId,
        phone: this.inputForm.phone,
        status: this.inputForm.status,
        fatherId: this.fatherId,
      }).then((res) => {
        if (res.success) {
          this.tableData = res.result.list;
          this.total = res.result.totalCount;
          // if (this.isAdd) {
          //   this.selectedRows = [this.tableData[0]];
          //   this.childId = this.tableData[0].id;
          //   this.handlePower();
          //   this.isAdd = false;
          // }
        }
      });
    },
    // 树权限（全选/全不选）
    handleRoleCheckedTreeNodeAll() {
      if (this.addmenuNodeAll) {
        this.$refs.menuRole.setCheckedNodes(this.menuOptions);
        this.$refs.menuRole.setCheckedNodes(this.menuList);
      } else {
        this.$refs.menuRole.setCheckedNodes([]);
      }
    },
    // 全选/全不选
    handleCheckedTreeNodeAll() {
      if (this.menuNodeAll) {
        let arr = [];
        this.menuOptions.length &&
          this.menuOptions.forEach((item) => {
            if (item.childMenuList.length == 0) {
              arr.push(item.id);
            } else {
              item.childMenuList.forEach((item__) => {
                if (item__.childMenuList.length == 0) {
                  arr.push(item__.id);
                } else {
                  item__.childMenuList.length &&
                    item__.childMenuList.forEach((item___) => {
                      if (item___.childMenuList.length == 0) {
                        arr.push(item___.id);
                      }
                    });
                }
              });
            }
          });
        this.$refs.menu.setCheckedNodes(this.menuOptions);
        this.$set(this.ruleForm, "ids", arr);
      } else {
        this.$refs.menu.setCheckedNodes([]);
        this.$set(this.ruleForm, "ids", []);
      }
      this.isIndeterminate = false;
    },
    // 点击权限管理按钮
    handlePower() {
      this.powerDialogVisible = true;
      this.handleRoleList();
    },
    getRoleList(type) {
      // 权限管理角色列表
      getAllroles().then((res) => {
        let result = res.result.filter((item) => {
          return item.available == 1;
        });
        this.options = result;

        // // 权限管理选中角色
        // if (type == 2) {
        //   childRoleList(this.childId).then((res) => {
        //     let roleId = res.result.map((item) => item.roleId);
        //     this.$set(this.addForm, "roleName", roleId);
        //   });
        // }
      });
    },
    handleSelectRole() {
      childRoleList(this.childId).then((res) => {
        let roleId = res.result.map((item) => item.roleId);
        let arr = [];
        this.options.length &&
          this.options.forEach((item) => {
            roleId.length &&
              roleId.forEach((items) => {
                if (item._id == items) {
                  arr.push(items);
                }
              });
          });
        this.$set(this.updateForm, "roleName", arr);
      });
    },
    handleRoleList() {
      // 权限管理角色列表
      getAllroles().then((res) => {
        let result = res.result.filter((item) => {
          return item.available == 1;
        });
        this.options = result;

        // 权限管理选中角色
        childRoleList(this.childId).then((res) => {
          let roleId = res.result.map((item) => item.roleId);
          this.$set(this.ruleForm, "roleName", roleId);

          this.handleMenuTree();
        });
      });
    },
    // 点击树节点
    handleCheckClick(data, checkedData) {
      let arr = this.$refs.menu.getCheckedKeys();

      if (arr.length) {
        this.$set(this.ruleForm, "ids", arr);
      } else {
        this.$set(this.ruleForm, "ids", []);
        this.$refs.menu.setCheckedNodes([]);
      }

      let ars = JSON.parse(JSON.stringify(this.menuOptions));
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < ars.length; j++) {
          if (ars[j].id == arr[i]) {
            ars[j].selected = 1;
          }
          let ars_ = ars[j].childMenuList;
          if (ars_.length) {
            for (let a = 0; a < ars_.length; a++) {
              if (ars_[a].id == arr[i]) {
                ars_[a].selected = 1;
              }

              let ars__ = ars_[a].childMenuList;
              if (ars__.length) {
                for (let b = 0; b < ars__.length; b++) {
                  if (ars__[b].id == arr[i]) {
                    ars__[b].selected = 1;
                  }
                }
              }
            }
          }
        }
      }

      // 判断是否全选
      let num = 0;
      ars.length &&
        ars.forEach((item) => {
          if (item.selected == 1) {
            num += 1;
          }
        });
      if (arr.length) {
        // 部分选中
        this.isIndeterminate = true;
        this.menuNodeAll = false;
        if (num == ars.length) {
          // 全选
          this.isIndeterminate = false;
          this.menuNodeAll = true;
        }
      } else {
        // 未选中
        this.isIndeterminate = false;
        this.menuNodeAll = false;
      }
    },
    getUserRole(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          const userRoleList = [];
          let id = "";
          for (let i = 0; i < this.selectedRows.length; i++) {
            for (let j = 0; j < this.ruleForm.roleName.length; j++) {
              userRoleList.push(this.ruleForm.roleName[j]);
            }
            id = this.selectedRows[i].id;
          }
          let arr = this.$refs.menu.getCheckedKeys() || this.ruleForm.ids || [];
          let ars = JSON.parse(JSON.stringify(this.menuOptions));
          for (let i = 0; i < arr.length; i++) {
            for (let j = 0; j < ars.length; j++) {
              if (ars[j].id == arr[i]) {
                ars[j].selected = 1;
              }

              let ars_ = ars[j].childMenuList;
              if (ars_.length) {
                for (let a = 0; a < ars_.length; a++) {
                  if (ars_[a].id == arr[i]) {
                    ars_[a].selected = 1;
                  }

                  let ars__ = ars_[a].childMenuList;
                  if (ars__.length) {
                    for (let b = 0; b < ars__.length; b++) {
                      if (ars__[b].id == arr[i]) {
                        ars__[b].selected = 1;
                      }
                    }
                  }
                }
              }
            }
          }

          saveOrUpdateMenuTreeAndRole({
            userId: id,
            menuNodeList: ars,
            roleIdList: userRoleList,
          }).then((res) => {
            this.powerDialogVisible = false;
            this.$refs.table.clearSelection();

            this.$refs.menu.setCheckedNodes([]);
            this.$set(this.ruleForm, "ids", []);
            this.handleList();
          });
        }
      });
    },

    //人员管理主账号下所有子账号
    handleChildPersonnel() {
      this.getOrgList();
      this.peopleDialogVisible = true;
      // this.dialogTableVisible = true;
      // const id = this.$store.state.user.id;
      // childPersonnel({ userId: id }).then((res) => {
      //   if (res.code == 200) {
      //     res.result.forEach((row) => {
      //       this.$refs.userTable.toggleRowSelection(
      //         this.tableData.find((item) => item.id == row.managedUserId),
      //         true
      //       );
      //     });
      //   }
      // });
    },
    // selectedDisabled(row, index) {
    //   console.log(row, index);
    // },
    //人员管理确定
    handlePerson() {
      const id = this.$store.state.user.id;
      personnelNew({ userId: id, managedUserIds: this.managedUserIds }).then(
        (res) => {
          this.dialogTableVisible = false;
        }
      );
    },

    //启用/停用
    handleStarOrStop() {
      const id = this.selectedRows.map((item) => item.id).join();
      this.selectedRows.map((item) => item.status);
      for (let i = 0; i < this.selectedRows.length; i++) {
        this.status = this.selectedRows[i].status;
      }
      if (this.status !== 200) {
        userStatus({ id, status: 200 }).then((res) => {
          this.starDialogVisible = false;
          this.handleList();
        });
      } else {
        userStatus({ id, status: 500 }).then((res) => {
          this.stopDialogVisible = false;
          this.handleList();
        });
      }
    },

    // 权限菜单选中值
    handleMenu() {
      getMenu(this.childId).then((res) => {
        if (res.code == 200) {
          let result = (res.result && res.result.firstMenuList) || [];
          let arr = [];
          let num = 0;
          if (result.length) {
            result.forEach((item_) => {
              if (item_.selected == 1) {
                num += 1;
                if (item_.childMenuList.length == 0) {
                  arr.push(item_.id);
                }
              }

              item_.childMenuList.length &&
                item_.childMenuList.forEach((item__) => {
                  if (item__.childMenuList.length == 0) {
                    if (item__.selected == 1) {
                      arr.push(item__.id);
                    }
                  } else {
                    item__.childMenuList.length &&
                      item__.childMenuList.forEach((item___) => {
                        if (item___.childMenuList.length == 0) {
                          if (item___.selected == 1) {
                            arr.push(item___.id);
                          }
                        }
                      });
                  }
                });
            });
            this.$set(this.ruleForm, "ids", arr);
          } else {
            this.$set(this.ruleForm, "ids", []);
            this.$refs.menu.setCheckedNodes([]);
          }

          // 判断是否全选
          if (arr.length) {
            // 部分选中
            this.isIndeterminate = true;
            this.menuNodeAll = false;
            if (num == result.length) {
              // 全选
              this.isIndeterminate = false;
              this.menuNodeAll = true;
            }
          } else {
            // 未选中
            this.isIndeterminate = false;
            this.menuNodeAll = false;
          }
        }
      });
    },
    // 初始化菜单权限下拉列表
    handleMenuTree() {
      let manager = this.manager == 1 ? 1 : 0;

      getMenuTree(manager).then((res) => {
        this.setData(res.result.firstMenuList);
        this.menuOptions = res.result.firstMenuList;

        if (this.ruleForm.roleName) {
          this.handleMenu();
        } else {
          this.$set(this.ruleForm, "ids", []);
          this.$refs.menu.setCheckedNodes([]);
        }
      });
    },
    setData(arr = []) {
      arr.length &&
        arr.forEach((item) => {
          if (item.childMenuList.length) {
            this.setData(item.childMenuList);
          }
          item.selected = 0;
        });
    },
    addUserClose() {
      this.addForm = {};
      this.dialogFormVisible = false;
      this.$refs.addForm.clearValidate();
      this.setEmailObj = {};
      this.setPhoneObj = {};
    },
    //关闭dialog
    handleClose() {
      // if (this.dialogFormVisible == true) {
      //   this.addForm = {};
      //   this.dialogFormVisible = false;
      //   this.$refs.addForm.clearValidate();
      //   this.setEmailObj = {};
      //   this.setPhoneObj = {};
      // }
      if (this.powerDialogVisible == true) {
        this.ruleForm = {};
        this.powerDialogVisible = false;
        this.$refs.ruleForm.clearValidate();
      }

      if (this.dialogVisible) {
        this.addRuleForm = {};
        this.dialogVisible = false;
        this.$refs.addRuleForm.clearValidate();
      }

      // if (this.updatedialogVisible) {
      //   this.updatedialogVisible = false;
      //   this.updateForm = {};
      //   this.$refs.updateForm.clearValidate();
      // }
      this.dialogTableVisible = false;
      this.resetDialogVisible = false;
      this.menuOptions = [];
      // if (!this.isAddRole) {
      //   this.$refs.table.clearSelection();
      // } else {
      //   this.isAddRole = false;
      // }

      this.setEmailObj = {};
      this.setPhoneObj = {};
    },
    handleUpdateClose() {
      this.updatedialogVisible = false;
      this.$set(this.updateForm, "podition", "");
      this.updateForm = {
        realName: "",
        userName: "",
        phone: "",
        email: "",
        position: "",
      };
      this.$refs.updateForm.clearValidate();
      this.$refs.table.clearSelection();
    },
  },
};
</script>

<style lang="scss" scpoed>
.manage-account {
  height: calc(100% - 39px);
  .el-table--border th:first-child .cell {
    padding-left: 6px;
    box-sizing: border-box;
  }
  .titles {
    font-size: 16px;
    color: #1a2035;
    margin: 15px 0;
  }
  .lines {
    width: 100%;
    height: 1px;
    background: #eeeeee;
    margin-bottom: 15px;
  }
  .btn {
    margin: 15px 0;
  }

  // 表格
  .table_1 {
    height: calc(100% - 123px);
  }
  .table_2 {
    height: calc(100% - 159px);
  }
  .table_ {
    .el-table {
      height: calc(100% - 74px);
    }
    .el-table__body-wrapper {
      height: calc(100% - 33px);
      overflow-y: scroll;
    }
    .status {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 5px;
      line-height: 23px;
      margin-bottom: 2px;
    }
  }

  // 弹框 - 新增
  .xgdialog_ {
    .el-dialog {
      .el-dialog__body {
        padding: 15px 102px 10px 108px;
      }
    }
  }
  .dialog_ {
    .el-dialog {
      .el-dialog__body {
        padding: 30px 102px 10px 108px;
      }
    }
  }
  .dialog_,
  .xgdialog_ {
    .el-dialog {
      width: 700px;
      .el-dialog__body {
        box-sizing: border-box;
        position: relative;
        .elForm {
          width: 100%;
          .jsForm {
            position: relative;
          }
          .addbtn_ {
            position: absolute;
            right: -31px;
            top: 1px;
            font-size: 20px;
            cursor: pointer;
            color: #2348e8;
          }
          .top20 {
            margin-top: 32px;
          }
          .el-form-item {
            width: 100%;
            display: flex;
            align-items: center;
            margin-bottom: 20px !important;
            .el-form-item__label {
              width: 84px;
              text-align: left;
              font-size: 12px !important;
            }
            .el-form-item__content {
              flex: 1;
              .el-select.el-select--small {
                width: 100%;
              }
            }
          }
          // 单-角色配置
          .qxForm {
            margin-bottom: 10px !important;
            .el-form-item__label {
              padding-left: 3px;
              box-sizing: border-box;
              font-size: 12px !important;
            }
          }
          // 单-修改账号
          .xgForm {
            margin-bottom: 15px !important;
            .el-form-item__label {
              padding-left: 5px;
              box-sizing: border-box;
              font-size: 12px !important;
            }
          }
          // 修改账号
          .lines_ {
            margin-bottom: 20px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 96%;
            height: 1px;
            background-color: #dddddd;
          }
          .tree-box {
            width: 100%;
            padding-left: 83px;
            box-sizing: border-box;
            .tree {
              border: 1px solid rgba(0, 0, 0, 0.15);
              padding: 10px;
              box-sizing: border-box;
              height: 200px;
              .el-form-item__content {
                height: 100%;
                overflow-y: scroll;
              }
            }
          }
        }
      }
      .el-dialog__footer {
        text-align: center;
      }
    }
  }
  // 弹框 - 重置密码
  .reset-dialog-header {
    .el-dialog {
      width: 430px;
      .el-dialog__header::after {
        display: none;
      }
      .el-dialog__header {
        height: 100px;
        position: relative;
        border: 0 !important;
        .reset-dialog-icon {
          font-size: 65px;
          position: absolute;
          left: 50%;
          top: 34%;
          margin-left: -33px;
          i {
            color: #2348e8;
          }
        }
      }
      .el-dialog__body {
        padding: 0 0 20px;
        box-sizing: border-box;
        .words {
          text-align: center;
          color: #666666;
          font-size: 14px;
        }
        h1 {
          font-size: 24px;
          font-weight: 600;
          color: #333333;
          text-align: center;
        }
      }
    }
  }

  //权限管理
  .power-dialog {
    padding-top: 0px;
    .el-dialog {
      .el-dialog__body {
        padding: 0px !important;
        .el-divider--horizontal {
          margin: 0;
          margin-bottom: 10px;
        }
      }
    }
    .tree {
      width: 291px;
      height: 269px;
      overflow-y: auto;
      border: 1px solid rgba(0, 0, 0, 0.15);
      margin-left: 120px;
      .el-form-item__content {
        margin-left: 0 !important;
      }
    }
  }
  //人员管理
  .user-dialog {
    padding-top: 0;
    .el-dialog {
      .el-dialog__body {
        padding: 0px !important;
        margin-bottom: 10px;
        .el-divider--horizontal {
          margin: 0;
          margin-bottom: 10px;
        }
        .uesr-table {
          width: 455px;
          height: 374px;
          margin: 32px 24px 0 21px;
          overflow: auto;
        }
      }
    }
  }
  .dialog-footer {
    text-align: center;
  }
  //启用
  .star-dialog-header {
    h1 {
      font-weight: 700;
      text-align: center;
    }
    .dialog-icon {
      font-size: 65px;
      i {
        color: #409eff;
      }
    }
  }
  .dialog-body {
    padding-top: 0;
    span {
      font-weight: 700;
      margin-right: 5px;
    }
  }
}
</style>

<style scoped lang="scss">
.addbtn {
  margin-left: 10px;
}
.setInputClass{
  width: 100%;
}
</style>